<template>
    <div class="home">
        <!-- 导航 -->
        <div class="nav">
            <van-search shape="ring" background="red" placeholder="请输入搜索关键词" />
            <van-icon name="point-gift-o" size="25" color="#3a3d42"/>
            <van-icon name="chat-o" size="22" color="#3a3d42"/>
        </div>

        <!-- 轮播图 -->
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="pink">
            <van-swipe-item><img src="https://pic.rmb.bdstatic.com/bjh/75e8132a1c31fedac4e38de030dc4ac7.jpeg" alt="">
            </van-swipe-item>
            <van-swipe-item><img src="https://pic.rmb.bdstatic.com/bjh/722a86b92eaafa9d3ba613d8259fa7c1.jpeg" alt="">
            </van-swipe-item>
            <van-swipe-item><img
                    src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zhongtaoyigou.cn%2Fupload%2Fcommon%2F1589531954.jpg&refer=http%3A%2F%2Fimg.zhongtaoyigou.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667959484&t=a60c526814824eeddfe0ae5abddcb465"
                    alt=""></van-swipe-item>
            <van-swipe-item><img src="https://pic.rmb.bdstatic.com/bjh/6947f37ab142cc2a8308f4b344dd735d.jpeg" alt="">
            </van-swipe-item>
        </van-swipe>

        <!-- 点击跳分类 -->
        <div class="gongneng">
            <div class="gnlist">
                <van-grid :border="false" :column-num="5">
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/分类 (1).png')" @click="classf"/>
                        <span>分类</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/支付-积分 (1).png')" @click="classg"/>
                        <span>积分商城</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/拼团 (1).png')" />
                        <span>拼团</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/优惠券 (1).png')" />
                        <span>天天好券</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/群蜂店铺名称 (1).png')" />
                        <span>店铺精选</span>
                    </van-grid-item>
                </van-grid>
            </div>
            <div class="gnlist1">
                <van-grid :border="false" :column-num="5">
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/美妆 (1).png')" />
                        <span>美妆</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/我的收藏 (1).png')" />
                        <span>好物收藏</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/数码 (1).png')" />
                        <span>数码</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/订单 (1).png')" />
                        <span>订单中心</span>
                    </van-grid-item>
                    <van-grid-item :gutter="10">
                        <van-image :src="require('../../assets/img/icon/下单时间 (1).png')" />
                        <span>限时秒杀</span>
                    </van-grid-item>
                </van-grid>
            </div>
        </div>

        <!-- 宣传 -->
        <div class="myDesk-page" :style="{'background': 'url(' + require('../../assets/img/haoHuoQiang.gif')+ ')',}">
            <div class="left-area">
                <div>
                    <img src="../../assets/img/haoHuoQiang.gif" width="100%" height="100%" alt="" />
                </div>
            </div>
        </div>

        <!-- 商品列表 -->

        <div class="goods">
            <h2>商品热卖</h2>
            <van-list>
                <div class="product" v-for="item in partslist" :key="item.id " @click="goDetail(item.id)">
                    <div class="product_r">
                        <img :src="item.product" alt="" />
                        <div class="rong">
                            <div class="name">{{ item.name }}</div>
                            <div class="price">￥{{ item.price }}</div>
                        </div>
                    </div>
                </div>
            </van-list>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { Parts } from '@/config/http';



export default {
    name: "InfiniteScroll",
    data() {
        return {
            partslist: [],
        };
    },
    props: {
        triggerDistance: {//触发距离
            type: Number,
            default: 1
        },
    },
    methods: {
        //点击跳转分类
        classf() {
            this.$router.push("/classify");
        },
        //点击跳转积分商城
        classg() {
            this.$router.push("/classifg");
        },
        // 获取商品列表
        parts() {
            axios.get(Parts).then((res) => {
                console.log(res.data);
                this.partslist = res.data
            })
        },
        // 点击跳转详情页
        goDetail(id) {
          const goodId = id 
          console.log(goodId)
          this.$router.push({
              name:"Detail",
              query:{
                  id:goodId
              }
          })
        }
    },
    created() {
        this.parts()
    }
}

</script>
<style scoped>
.van-grid {
    margin-top: 20px;
}

.nav {
    width: 100%;
    height: 50px;
    background-color: red;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    overflow: hidden;
    display: flex;
}

.van-search__content {
    border-radius: 18px;
    width: 30px;
    height: 32px;
}

.van-search {
    width: 300px;
    margin-left: 5px;
}

.van-icon-point-gift-o{
    margin-right: 8px;
    margin-top:15px;
}

.van-icon-chat-o{
    margin-top:15px;
}

.van-swipe {
    height: 160px;
    margin-top: 50px;
    border-radius: 10px;
    margin: 62px 10px 10px;
    box-sizing: border-box;
}

.van-swipe img {
    width: 100%;
    height: 160px;
}

.van-grid {
    padding: 0;
}

.goods h2 {
    margin: 18px 0px 13px 10px;
    font-weight: 900;
    color: red;
    font-size: 15px;
}

.van-list {
    column-count: 2;
    column-gap: 0.5em;
    -moz-column-count: 2;
    -webkit-column-count: 2;
    -moz-column-gap: 0.5em;
    -webkit-column-gap: 0.5em;
    margin: 10px;
}

.product_r {
    border: 1px solid rgba(231, 228, 228, 0.4);
    margin-bottom: 10px;
}

.product_r img {
    width: 100%;
    height: 100%;
}

.rong {
    margin: 10px;
}

.gongneng span {
    font-size: 12px;
    margin-top: 18px;
    color: gray;
}

.rong .name {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    margin-bottom: 10px;
}

.rong .price {
    color: red;
}
</style>
